<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>便签</title>
    <style>
      .note {
        width: 400px;
        height: 300px;
        background-color: yellowgreen;
        position: absolute;
        top: 100px;
        left: 100px;
        border: 1px solid black;
      }
      .move-bar {
        width: 100%;
        height: 40px;
        background-color: yellow;
        border-bottom: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div class="note">
      <div class="move-bar"></div>
    </div>
  </body>
  <script>
    var moveBar = document.querySelector(".move-bar");
    var note = document.querySelector(".note");
    moveBar.onmousedown = function (e) {
      console.log("mousedown");
      var x = e.clientX,
        y = e.clientY,
        rect = moveBar.getBoundingClientRect(),
        ex = rect.left,
        ey = rect.top,
        maxLeft = window.innerWidth - note.offsetWidth,
        maxTop = window.innerHeight - note.offsetHeight;
      window.onmousemove = function (e) {
        console.log("mousemove");
        var disX = e.clientX - x,
          disY = e.clientY - y,
          left = ex + disX,
          top = ey + disY;
        note.style.left = left < 0 ? 0 : left > maxLeft ? maxLeft : left + "px";
        note.style.top = top < 0 ? 0 : top > maxTop ? maxTop : top + "px";
      };
      window.onmouseup = function () {
        console.log("mouseup");
        window.onmousemove = null;
        window.onmouseup = null;
      };
    };
  </script>
</html>
